<template>
  <!-- order -->
  <div class="order">
    <div class="order__price">
      实付金额: <b>{{ totalPrice }}</b>
    </div>
    <div class="order__btn" @click="handleChangeMash">提交订单</div>
  </div>
  <!-- 遮罩层 -->
  <div class="mask" v-if="showMash" @click="handleChangeMash">
    <div class="mask__content" @click.stop>
      <h3 class="mask__content__title">确认离开收银台?</h3>
      <p class="mask__content__desc">请尽快完成支付，否则将被取消</p>
      <div class="mask__content__btns">
        <button
          class="mask__content__btn cancel"
          @click="() => handleOrder(true)"
        >
          取消订单
        </button>
        <button
          class="mask__content__btn confirm"
          @click="() => handleOrder(false)"
        >
          确认支付
        </button>
      </div>
    </div>
  </div>
  <!-- <Toast v-if="showToast" /> -->
</template>

<script>
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { ref } from 'vue';
import { post } from '../../utils/request';
import { useCommonCartEffect } from '../../effects/cartEffects';
import Toast from '../../components/Toast.vue';
// totalPrice
const useCartEffect = () => {
  const route = useRoute();
  const shopId = parseInt(route.params.id, 10);
  const { totalPrice, shopName, shopList } = useCommonCartEffect(shopId);
  return { totalPrice, shopId, shopName, shopList };
};
// 遮罩层
const toggleMask = () => {
  const showMash = ref(false);
  const handleChangeMash = () => {
    showMash.value = !showMash.value;
  };
  return { showMash, handleChangeMash };
};
// 下单相关逻辑
const useOrderEffect = (shopId, shopName, shopList, handleChangeMash) => {
  const router = useRouter();
  const store = useStore();
  const products = [];
  for (const key in shopList.value) {
    const product = shopList.value[key];
    products.push({ id: parseInt(product._id, 10), num: product.count });
  }
  const handleOrder = async (isCancel) => {
    if (isCancel) {
      return handleChangeMash();
    }
    try {
      const result = await post('/api/order', {
        addressId: 1,
        shopId,
        shopName: shopName.value,
        isCancel,
        products,
      });
      console.log('aa');
      console.log(result);
      if (result?.errno === 0) {
        const cartList = JSON.parse(localStorage.cartList || '{}');
        delete cartList[shopId];
        localStorage.cartList = JSON.stringify(cartList);
        store.commit('cleanCartData', shopId);
        router.push({ name: 'OrderList' });
      }
    } catch (error) {}
  };
  return { handleOrder };
};
export default {
  name: 'Products',
  components: { Toast },
  setup() {
    const { showMash, handleChangeMash } = toggleMask();
    const { totalPrice, shopId, shopName, shopList } = useCartEffect();
    const { handleOrder } = useOrderEffect(
      shopId,
      shopName,
      shopList,
      handleChangeMash
    );

    return {
      showMash,
      totalPrice,
      handleChangeMash,
      handleOrder,
    };
  },
};
</script>

<style lang="scss" scoped>
@import '../../style/variables.scss';
@import '../../style/mixins.scss';
.order {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: $bgColor;
  height: 0.5rem;
  line-height: 0.5rem;

  &__price {
    font-size: 0.14rem;
    text-indent: 0.24rem;
    color: $content-fontColor;
  }
  &__btn {
    width: 0.98rem;
    background-color: $btn-bgColor;
    color: $bgColor;
    text-align: center;
    font-size: 0.14rem;
  }
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba($color: #000000, $alpha: 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  &__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 1.56rem;
    background-color: $bgColor;
    border-radius: 0.04rem;
    &__title {
      margin-top: 0.08rem;
      line-height: 0.26rem;
      font-size: 0.18rem;
      color: $content-fontColor;
    }
    &__desc {
      margin: 0.08rem 0 0.24rem;
      font-size: 0.14rem;
      color: $medium-fontColor;
    }
    &__btns {
      display: flex;
      justify-content: center;
      width: 100%;
      font-size: 0.14rem;
      gap: 0.24rem;
    }
    &__btn {
      border-radius: 0.16rem;
      border: 0.01rem solid $btn-bgColor;
      outline: 0;
      width: 0.8rem;
      line-height: 0.32rem;
    }
  }
}
.cancel {
  color: $btn-bgColor;
  background-color: $bgColor;
}
.confirm {
  color: $bgColor;
  background-color: $btn-bgColor;
}
</style>
